<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息表</title>
    <style>
        table {
            width: 80%;
            border-collapse: collapse;
            margin: 20px auto;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        .button-style {
            display: -moz-inline-block;
            padding: 10px 20px;
            background-color: #4CAF50; /* 设置按钮背景颜色 */
            color: white; /* 设置按钮文本颜色 */
            text-align: center;
            text-decoration: none;
            border: none;
            border-radius: 4px; /* 设置按钮圆角 */
            cursor: pointer;
        }

        .button-style2 {
            display: -moz-inline-block;
            padding: 4px 10px;
            background-color: #B285CE; /* 设置按钮背景颜色 */
            color: white; /* 设置按钮文本颜色 */
            text-align: center;
            text-decoration: none;
            border: none;
            border-radius: 4px; /* 设置按钮圆角 */
            cursor: pointer;
        }

        .button-style:hover {
            background-color: #45a049; /* 设置鼠标悬停时的背景颜色 */
        }

        /* 样式搜索框输入框 */
        .search-input {
            width: 20%;
            padding: 10px;
            border: 2px solid #ccc;
            border-radius: 10px;
            font-size: 16px;
            float: right;
            margin-right: 200px;
            margin-top: -40px;
        }

        /* 样式搜索框按钮 */
        .search-button {
            position: absolute;
            top: 0;
            right: 0;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 0 5px 5px 0;
            font-size: 14px;
            float: right;
            margin-right: 158px;
            margin-top: 53px;
        }
    </style>
</head>
<body>
<h2 style="text-align: center;">个人信息表</h2><br>
<form method="get">
    <!-- 搜索框输入框 -->
    <input type="text" name="q" class="search-input" placeholder="请输入搜索关键字..." value="{{search_data}}">

    <!-- 搜索框按钮 -->
    <button type="submit" class="search-button">搜索</button>

</form>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>爱好</th>
        <th>成绩</th>
        <th>操作</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for obj in data_list %}
    <tr>
        <td>{{ obj.id }}</td>
        <td>{{ obj.username }}</td>
        <td>{{ obj.age }}</td>
        <td>{{ obj.address }}</td>
        <td>{{ obj.hobby }}</td>
        <td>{{ obj.grade }}</td>
        <td>
            <a class="button-style2" href="/info/{{obj.id}}/edit" style="text-decoration: none;">编辑</a>
        </td>
        <td>
            <a class="button-style2" href="/info/delete/?nid={{obj.id}}" style="text-decoration: none;">删除</a>
        </td>
    </tr>
    {% endfor %}
    </tbody>


</table>
<div style="text-align:center; font-size: 16px">
    <a class="button-style" href="/info/add" style="text-decoration: none;">添加资料</a>
</div>


</body>
</html>



